<template>
	<span :style="`width:${width}px;${activeColor&&value?`background:${activeColor};border-color:${activeColor}`:inActiveColor&&!value
	?`background:${inActiveColor};border-color:${inActiveColor}`:''}`" :disabled="disabled" :checked="value"
		@click="click">
	</span>
</template>

<script>
	export default {
		// 组件名称
		name: 'zh-switch',
		// 组件参数 接收来自父组件的数据
		props: {
			// 被激活时的颜色
			activeColor: {
				type: String,
				default: "green",
			},
			// 未激活时的颜色
			inActiveColor: {
				type: String,
				default: "gray",
			},
			value: Boolean,
			// 宽
			width: {
				type: Number,
				default: 40,
			},
			// 禁用
			disabled: {
				type: Boolean,
				default: false,
			}
		},
		// 组件方法
		methods: {
			click() {
				if (this.disabled) {
					return
				}
				this.$emit('input', !this.value);
				this.$emit('change', !this.value)
			}
		},
		/**
		 * 组件实例创建完成
		 */
		created() {},
	}
</script>

<style lang="scss" scoped>
	@import '../variable.scss';

	span {
		display: inline-block;
		background-color: $gray;
		width: 46px;
		height: 20px;
		border-radius: 20px;
		box-sizing: border-box;
		position: relative;
		border: 2px solid $gray;
		cursor: pointer;

		&::after {
			content: '';
			display: inline-block;
			position: absolute;
			width: 16px;
			height: 16px;
			border-radius: 50%;
			background-color: $white;
			left: 0;
			top: 0;
			transition: left 0.3s, margin-left 0.3s;
		}

		&[checked] {
			border-color: $blue;
			background-color: $blue;

			&::after {
				left: 100%;
				margin-left: -16px;
			}
		}

		&[disabled] {
			opacity: 0.6;
			cursor: not-allowed;
		}
	}
</style>
